<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .active {
            background: red;
        }
    </style>
</head>
<body>
<div id="box">
    <button @click="fetchData">点击请求数据</button>
    <ul>
        <li v-for="data in dataList">
            {{data.name}} --- {{data.username}} ---- {{data.mobile}}
        </li>
    </ul>

    <div>
        <div>
            <div><input v-model="username">用户名</div>
            <div><input v-model="password">密码</div>
            <div></div>
            <button @click="login">登录</button>
        </div>
        <div>{{loginMessage}}</div>
    </div>

    <div>
        <div><input v-model.number="id">输入删除的id</div>
        <button @click="deleteData">删除</button>
    </div>
</div>
</body>
<script>
    var obj = {
        data() {
            return {
                username: "",
                password: "",
                loginMessage: "未登录",
                dataList: [],
                id:0
            }
        },
        methods: {
            fetchData() {
                axios.get("http://localhost:8080/user/list?pageNo=1&pageSize=100")
                    .then(res => {
                        this.dataList = res.data.data
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            login() {
                axios.post("http://localhost:8080/user/login", {
                    username: this.username,
                    password: this.password
                })
                    .then(res => {
                        this.loginMessage = res.data.message
                    }).catch(err => {
                        console.log(err)
                    }
                )
            },
            deleteData() {
                axios({
                    method:"delete",
                    url:"http://localhost:8080/user/delete",
                    data:{
                       ids: [this.id]
                    }
                }).then(res => {
                    this.loginMessage = res.data.message
                }).catch(err => {
                    console.log(err)
                })
            }

        }


    }
    var app = Vue.createApp(obj).mount("#box")
</script>
</html>